import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
  state = { mouse: false } //标识鼠标移入、移出

  // 处理鼠标的移入和移出
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag })
    }
  }

  handleCheck = (id) => {
    return event => {
      this.props.updateTodo(id, event.target.checked)
    }
  }

  render() {
    const { done, id, name } = this.props
    const { mouse } = this.state

    return (
      <li style={{ backgroundColor: mouse ? '#ddd' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
          {/* <input type="checkbox" checked={done} onChange={this.handleCheck(id)} /> */}
          {/* 所以，注意这种非柯里化的调用方式，也是可以传递event的 */}
          <input type="checkbox" checked={done} onChange={(event) => this.props.updateTodo(id, !done, event)} />
          <span>{name}</span>
        </label>
      </li>
    )
  }
}

